<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
// 渲染进程中的主要线程:
// 1.GUI渲染线程,主要负责页面渲染
    // 1.从上到下解析HTML标签,构建DOM Tree(节点树)
    // 2.解析CSS构建 CSSOM Tree(样式树)
    // 3.根据 节点树 和 样式树 计算生成 Rendering Tree(渲染树)
    // 4.根据渲染树,渲染显示到浏览器界面中

// 2.JS引擎线程,主要负责解析和执行JS脚本(主线程)
// 浏览器每一个标签页中只有一个JS引擎线程能解析执行JS脚本
// 所以说,JS是单线程脚本语言

// GUI渲染线程和JS引擎线程是互斥的关系
// GUI渲染线程解析到script标签时,GUI渲染线程停止工作,JS引擎线程开始工作

// 3.事件触发线程,主要负责事件控制和事件触发时回调函数的管理
// 在浏览器中 click 计时器 ajax请求等 这些行为都是 事件,这些事件都是异步的
// 事件触发线程管理着一个事件队列(任务队列),队列中是符合触发条件的回调函数
// 事件队列中的回调函数等待JS引擎线程空闲时来调用
// 事件队列 => [callback1,callback2,callback3....]
// 比如,btn的click事件触发时,事件处理函数callback1会被加入事件队列中等待被调用

// 4.计时器线程,主要负责给某个函数计时
// setTimeout(function callback2(){},2000)
// 当setTimeout()执行后,告诉计时器线程,给callback2计时2000毫秒
// 当callback2计时2000毫秒后,会被加入事件队列中等待被调用

// 5.异步http请求线程,主要负责监听异步请求的状态改变
// 异步请求的状态改变后,对应的回调函数callback3会被加入事件队列中等待被调用

</script>
</body>
</html>